<template>
    <u-sticky>
        <view class="common-header" :style="{ background: background }">
            <!-- 手机状态栏高度 -->
            <view class="status" :style="{ 'height': statusBarHeight + 'px' }"></view>
            <template v-if="noBgImg">
                <view class="nav-bar" :style="{ 'height': height + 'px' }">{{ title }}</view>
            </template>
            <template v-else>
                <view class="top-img" :style="{ height: BgImgHeight, background: backgroundImg }">
                    <view class="nav-bar" :style="{ 'height': height + 'px' }">{{ title }}</view>
                </view>
            </template>
            <slot name="default"></slot>
        </view>
        <slot name="other"></slot>
    </u-sticky>
</template>

<script>
export default {
    props: {
        title: { //标题
            type: String,
            default: "",
        },
        background: { //工作台公共头部 背景颜色
            type: String,
            default: "transparent",
        },
        noBgImg: { //工作台首页 是否有背景图片   我的页面就没有背景图片
            type: Boolean,
            default: false
        },
        backgroundImg: { //工作台首页  头部背景图片  目前只有合作单位的是特殊的，其他端都是一样的背景图片
            type: String,
            default: "",
        },
        BgImgHeight: {//工作台首页  头部背景图片的高度  目前 合作单位的高度是246rpx  其他是286rpx
            type: String,
            default: "286rpx",
        },
    },

    data() {
        return {
            statusBarHeight: 0,// 状态栏高度
            navBarHeight: 82 + 11,// 导航栏高度
            height: '96rpx',
        }
    },
    onReady() {
        uni.getSystemInfo({
            success: (e) => {
                this.statusBarHeight = e.statusBarHeight;
                let custom = uni.getMenuButtonBoundingClientRect();
                this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
            }
        })
    },
    methods: {

    }
}
</script>

<style></style>
